<!DOCTYPE html>
<html>

<head>
	<title>设备</title>
</head>

<body>
	<div style="padding: 16px;">
		<div id="container"></div>
	</div>
</body>
<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=1.0&type=webgl&&ak=UZyauBmbunmSuxGmKedUXmrkNjq5WVKr"></script>
<script>
	$(function () {
		layui.request.post("device/search", {page: 1, size: 1000}).then(res => {
			initMap(res.data);
		})

		function initMap(tableData) {
			var map = new BMapGL.Map("container"); // 创建地图实例
			var centerPoint = null; // 创建点坐标
			tableData.forEach(item => {
				const deviceData = item
				if (deviceData) {
					if (deviceData.longitude && deviceData.latitude) {
						if (centerPoint == null) {
							centerPoint = new BMapGL.Point(deviceData.longitude, deviceData.latitude)
						}
						var point = new BMapGL.Point(deviceData.longitude, deviceData.latitude)
						var marker = new BMapGL.Marker(point)
						marker.enableDragging()
						map.addOverlay(marker)
						var opts = {
							width: 200,     // 信息窗口宽度
							height: 100,     // 信息窗口高度
							title: item.mac, // 信息窗口标题
						}
						var infoWindow = new BMapGL.InfoWindow(item.address, opts);  // 创建信息窗口对象 
						marker.addEventListener("click", function (e) {
							map.openInfoWindow(infoWindow, e.latLng); //开启信息窗口
						});


					}
				}
			})
			if (centerPoint == null) {
				map.centerAndZoom('北京市', 15);
			} else {
				map.centerAndZoom(centerPoint, 15); // 初始化地图，设置中心点坐标和地图级别
			}
			var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
			map.addControl(scaleCtrl);
			var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
			map.addControl(zoomCtrl);
			map.enableScrollWheelZoom(true);
		};
	})
</script>
<style scoped>
	#container {
		width: 100%;
		height: 85vh;
	}
</style>

</html>